<template>
  <el-row>
    <el-col :span="12">
      <div style="width: 1890px; height: 1300px; border: 1px;border-bottom-color: red">

        <div slot="header"><h1>订单详情</h1></div>
        <div style="text-align: right" slot="header">
          <el-button type="primary" @click="$router.go(-1)">返回</el-button>
        </div>

        <div id="ding">
          <div>订单编号：{{ duixiang.orderNumber }}</div>
          <div>
            <span class="status-text">{{
                duixiang.status == 1 ? '创建订单' : duixiang.status == 2 ? '开始派件' : duixiang.status == 3 ? '派件成功' : duixiang.status == 4 ? '等待取件' : duixiang.status == 5 ? '取件成功' : '已超时'
              }}</span>
          </div>
          <div>
            <el-button @click="fasong(shou.phone)">重发取货码</el-button>
          </div>
          <div>
            <el-button @click="fa(shou.phone)">催促客户取件</el-button>
          </div>
        </div>

        <div id="jin">
          <el-steps :active="duixiang.status" align-center>
            <el-step title="创建订单" description="创建订单"></el-step>
            <el-step title="开始派件" description="开始派件"></el-step>
            <el-step title="派件成功" description="派件成功"></el-step>
            <el-step title="等待取件" description="等待取件"></el-step>
            <el-step title="取件成功" description="取件成功"></el-step>
            <el-step title="已超时" description="已超时"></el-step>
          </el-steps>
        </div>

        <div id="gui">
          <div>
            <el-card>
              <div slot="header">
                <span>快递柜信息</span>
              </div>
              <div>
                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                  <div style="width: 120px;">柜机编码：</div>
                  <div>
                    <span>{{ duixiang.mnumber }}</span>
                  </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                  <div style="width: 120px;">柜机地址：</div>
                  <div>
                    <span> {{ duixiang.position + duixiang.address }}</span>
                  </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                  <div style="width: 120px;">箱格位置：</div>
                  <div>
                    <span>{{ duixiang.position }}</span>
                  </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                  <div style="width: 120px;">包裹单号：</div>
                  <div>
                    <span>{{ duixiang.packageNumber }}</span>
                  </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                  <div style="width: 120px;">取货码：</div>
                  <div>
                    <span>#{{ yan }}</span>
                  </div>
                </div>
              </div>

            </el-card>
          </div>
          <div id="shijian">
            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.processTime">
                {{ activity.processStep }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div id="xia">
          <div id="xia1">
            <span>派件人信息</span>
            <table>
              <tr>
                <td>派件人:</td>
                <td>{{ pai.name }}</td>
              </tr>
              <tr>
                <td>手机号码：</td>
                <td>{{ pai.phone }}</td>
              </tr>
              <tr>
                <td>快递公司：</td>
                <td>{{ pai.courierCompany }}</td>
              </tr>
            </table>
          </div>
          <div id="xia2">
            <span>付款信息</span>
            <table>
              <tr>
                <td>派件费：</td>
                <td>{{ zhi.deliveryFee }}</td>
              </tr>
              <tr>
                <td>优惠：</td>
                <td>{{ zhi.discount }}</td>
              </tr>
              <tr>
                <td>实付款：</td>
                <td>{{ zhi.actualPayment }}</td>
              </tr>
              <tr>
                <td>费用类型：</td>
                <td>{{ zhi.costType }}</td>
              </tr>
              <tr>
                <td>支付方式：</td>
                <td>{{ zhi.paymentMethod }}</td>
              </tr>
              <tr>
                <td>支付时间：</td>
                <td>{{ zhi.transactionTime }}</td>
              </tr>
              <tr>
                <td>交易号：</td>
                <td>{{ zhi.transactionNumber }}</td>
              </tr>
            </table>
          </div>
          <div id="xia3">
            <span>收件人信息</span>
            <table>
              <tr>
                <td>取件人:</td>
                <td>{{ shou.name }}</td>
              </tr>
              <tr>
                <td>手机号码：</td>
                <td>{{ shou.phone }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {getEOr1derPackage, getEPerSonnel, getzhifu, sendSms} from "@/api/parcel/parcel";

export default {
  name: "xiangiqng",
  data() {
    return {
      duixiang: this.$route.query.duixiang,
      activities: [
        {},
      ],
      pai: {},
      shou: {},
      reverse: false,
      zhi: {},
      yan:"",
    };
  },
  created() {
    this.getEOrderPackage();
    this.cha();
    this.zhifu();
  },
  methods: {
    /** 时间对象赋值 */
    getEOrderPackage() {
      getEOr1derPackage(this.duixiang.orderNumber).then(row => {
        this.activities = row;
      })
    },
    cha() {
      getEPerSonnel(this.duixiang.dispatcher).then(row => {
        this.pai = row.data;
      })
      getEPerSonnel(this.duixiang.picker).then(row => {
        this.shou = row.data;
      })
    },
    zhifu() {
      console.log("aaaaaa")
      console.log(this.duixiang.orderNumber)
      getzhifu(this.duixiang.orderNumber).then(row => {
        console.log("bbbbbbb")
        console.log(this.zhi)
        this.zhi = row
      })
    },
    fasong(phone){
      sendSms(phone).then(row=>{
        this.yan = row
        this.$message.success("发送成功")
      })
    },
    fa(phone){
      sendSms(phone).then(row=>{
        // this.yan = row
        this.$message.success("发送成功")
      })
    }

  }
};
</script>
<style>
#ding {
  width: 400px;
  height: 200px;
  border: dashed 1px;
  text-align: center;
  position: absolute;
  top: 150px;
  left: 150px;

  //background-color: black;
}

#jin {
  border: dashed 1px;
  width: 999px;
  height: 200px;
  position: absolute;
  top: 150px;
  right: 318px;
  //right: -57px;

}

.status-text {
  color: #157a0c; /*设置颜色为黑色，与图片中的“已超时”颜色一致*/
  font-size: 14px; /*这里的字体大小可以根据实际情况调整*/
  display: block; /*让文本单独占据一行，类似图片中的布局*/
  margin-left: 20px; /*设置左边距，你可以根据实际效果调整*/
  margin-right: 20px; /*设置右边距，你可以根据实际效果调整*/
  font-size: 30px;
}

#gui {
  border: dashed 1px;
  width: 400px;
  height: 300px;
  //border: 1px;
  //position: absolute;
  //background-color: red;
  position: absolute;
  top: 350px;
  left: 150px;
}

#shijian {
  width: 999px;
  height: 300px;
  border: dashed 1px;
  //border-bottom-color: red;
  position: absolute;
  top: -2px;
  left: 398px;
  //background-color: blue;
}

#xia {
  width: 1399px;
  height: 200px;
  border: dashed 1px;
  position: absolute;
  top: 650px;
  left: 150px;
}

#xia1 {
  width: 466px;
  height: 200px;
  border: dashed 1px;
  position: absolute;
  top: 0px;
  left: 0px;
}

#xia2 {
  width: 466px;
  height: 200px;
  border: dashed 1px;
  position: absolute;
  top: 0px;
  left: 466px;
}

#xia3 {
  width: 466px;
  height: 200px;
  border: dashed 1px;
  position: absolute;
  top: 0px;
  left: 932px;
}
</style>
